import Hot from "@/static/img/home_xpcx_icon_@2x.png";
import {HomeProps} from "@/containers/Home/type.ts";

type CardProps = {
    freshes: HomeProps['freshes']
}

function Card(props: CardProps) {
    const {freshes} = props
    return <div className="card">
        <h3 className="card-title">
            <img src={Hot} alt="新品尝鲜" className={"card-title-img"}/>
            新品尝鲜
            <div className="card-title-more">更多<span className={"iconfont"}>&#xe614;</span></div>
        </h3>
        <div className={"card-content"}>
            {freshes?.length > 0 ?
                freshes.map((item) => (
                    <div className={"card-content-item"} key={item.id}>
                        <img src={item.imgUrl} alt={item.name} className={"card-content-item-img"}/>
                        <div className={"card-content-item-desc"}>{item.name}</div>
                        <div className={"card-content-item-price"}>
                            <span className={"card-content-item-yen"}>&yen;</span>
                            {item.price}
                            <div className={"iconfont"}>&#xe7e0;</div>
                        </div>
                    </div>
                ))
                : ''}
        </div>
    </div>
}

export default Card

